<template>
  <div ref="chartDom" style="width: 300px; height: 160px"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import "echarts-gl";

import serviceEnterpriseJson from "../../../mock/serviceEnterprise.json";
const serviceEnterpriseData = ref(serviceEnterpriseJson.data);

const chartDom = ref(null);
let myChart = null;

// 3D饼图参数方程生成器
function getParametricEquation(
  startRatio,
  endRatio,
  isSelected,
  isHovered,
  k,
  h
) {
  const midRatio = (startRatio + endRatio) / 2;
  const startRadian = startRatio * Math.PI * 2;
  const endRadian = endRatio * Math.PI * 2;
  const midRadian = midRatio * Math.PI * 2;
  k = typeof k !== "undefined" ? k : 1 / 3;

  return {
    u: { min: -Math.PI, max: Math.PI * 3, step: Math.PI / 32 },
    v: { min: 0, max: Math.PI * 2, step: Math.PI / 20 },
    x: (u, v) => {
      if (u < startRadian) return Math.cos(startRadian) * (1 + Math.cos(v) * k);
      if (u > endRadian) return Math.cos(endRadian) * (1 + Math.cos(v) * k);
      return Math.cos(u) * (1 + Math.cos(v) * k);
    },
    y: (u, v) => {
      if (u < startRadian) return Math.sin(startRadian) * (1 + Math.cos(v) * k);
      if (u > endRadian) return Math.sin(endRadian) * (1 + Math.cos(v) * k);
      return Math.sin(u) * (1 + Math.cos(v) * k);
    },
    z: (u, v) => (Math.sin(v) > 0 ? Math.sin(v) * h : 0),
  };
}

// 生成3D饼图配置
function getPie3D(data, internalDiameterRatio) {
  const series = [];
  const color = ["#7EBEFF", "#5797FF", "#856ED4", "#2F4BA8", "#61EBF0"];

  data.forEach((item, index) => {
    const startRatio = index / data.length;
    const endRatio = (index + 1) / data.length;
    console.log("index", startRatio, endRatio);

    series.push({
      type: "surface",
      //   avoidLabelOverlap: true,
      // label: {
      //   show: true,
      //   formatter: (params) => {
      //     console.log("params", params);
      //     return `${item.name}:\n${item.value}%`;
      //   },
      //   opacity: 1,
      //   fontSize: 10,
      //   lineHeight: 20,
      //   fontSize: 10,
      //   color: "red",
      //   padding: [0, -40, 0, -40],
      //   position: "outside",
      // },

      // labelLine: {
      //   length: 20,
      //   length2: 50,
      //   lineStyle: {
      //     color: "#979797",
      //   },
      // },
      parametric: true,
      wireframe: { show: false },
      itemStyle: { color: color[index] },
      parametricEquation: getParametricEquation(
        startRatio,
        endRatio,
        false,
        false,
        internalDiameterRatio,
        10
      ),
    });
  });
  console.log("ser", series);
  return {
    xAxis3D: { min: -3, max: 3 },
    yAxis3D: { min: -3, max: 3 },
    zAxis3D: { min: -3, max: 3 },
    grid3D: {
      show: false,
      boxHeight: 0.01,
      left: "center",
      top: "center",
      //   top: "0",
      width: "100%",
      height: "100%",
      center: [0, 0, 0],
      boxHeight: 10,
      // boxWidth和boxDepth这两个属性值保持一致，才可以在调整饼图宽度的时候保持水平，不然就会歪歪扭扭
      boxWidth: 210,
      boxDepth: 210,
      viewControl: {
        // projection: 'orthographic', // 正交投影（无近大远小效果）
        autoRotate: true, // 自动旋转
        autoRotateSpeed: 8,
        autoRotateDirection: "ccw",
        damping: 0.1,
        rotateSensitivity: 1,
        alpha: 35, // 初始视角参数
        beta: 45, // 俯视角 (0=俯视, 90=正视)
        distance: 130, // 观察距离
      },
    },
    backgroundColor: "transparent",

    series,
  };
}

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  const option = getPie3D(
    // [
    //   { name: "类别A", value: 45 },
    //   { name: "类别B", value: 25 },
    //   { name: "类别C", value: 20 },
    //   { name: "类别D", value: 10 },
    // ],
    serviceEnterpriseData.value,
    0.6
  );

  myChart.setOption(option);
  window.addEventListener("resize", myChart.resize);
});

onBeforeUnmount(() => {
  if (myChart) {
    window.removeEventListener("resize", myChart.resize);
    myChart.dispose();
  }
});
</script>
